<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>主页</title>
    <link rel="stylesheet" href="./bootstrap-4.6.2-dist/css/bootstrap.css">
    <link rel="stylesheet" href="./bootstrap-4.6.2-dist/css/bootstrap-icons/bootstrap-icons.css">
    <script src="./bootstrap-4.6.2-dist/js/jquery-3.7.1.min.js"></script>
    <script src="./bootstrap-4.6.2-dist/js/bootstrap.bundle.js"></script>
</head>

<style>
    body {
        font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
        color: #333;
        line-height: 1.6;
    }

    a {
        text-decoration: none;
        color: #333;
        transition: color 0.3s ease;
    }

    a:hover {
        color: #ffc107;
    }

    /* 导航栏 */
    .navbar {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    }

    .navbar-brand {
        font-size: 2rem;
        font-weight: 700;
        color: #ffc107 !important;
    }

    .nav-link {
        margin: 0 0.5rem;
        font-weight: 500;
    }

    /* 登录界面 */
    .login-modal .modal-content {
        border-radius: 8px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    .login-modal .modal-header {
        border-bottom: none;
    }

    .login-modal .form-control:focus {
        border-color: #ff6b00;
        box-shadow: 0 0 0 0.25rem rgba(255, 107, 0, 0.25);
    }

    .login-btn {
        background-color: #ff6b00;
        border-color: #ff6b00;
        transition: all 0.3s;
    }

    .login-btn:hover {
        background-color: #e65e00;
        transform: translateY(-2px);
    }

    .forgot-password {
        color: #666;
        font-size: 14px;
        transition: color 0.3s;
    }

    .forgot-password:hover {
        color: #ff6b00;
        text-decoration: underline;
    }

    .my-pills .nav-link.active {
        color: #000;
        font-weight: bolder;
        background-color: white !important;
        border-bottom: 2px solid #000;
        border-bottom-left-radius: 0px;
        border-bottom-right-radius: 0px;
        border-color: #007bff !important;
    }

    /*精选房型*/
    .card {
        margin: 1rem;
        padding: 0.5rem;
        background-color: white;
        border-radius: 0.25rem;
        box-shadow: 0px 0px 10px 5px rgb(155, 153, 153);
        /*卡片阴影*/
    }

    .card h5 {
        color: #ace8f2;
    }

    .card:hover {
        transform: scale(1.03);
        transition: all 0.3s ease-in-out;
    }

    /*客户评价*/
    .review-card {
        border: 1px solid #eee;
        border-radius: 8px;
        padding: 1.5rem;
        transition: all 0.3s ease;
    }

    .review-card:hover {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    }

    /* 页脚 */
    footer {
        background-color: #0c2b4b;
        color: #fff;
    }

    @media (min-width: 576px) {
        .modal-dialog {
            max-width: 800px;
            margin: 1.75rem auto;
        }
    }
</style>

<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-light bg-white">
        <div class="container">
            <a class="navbar-brand" href=" ">HUAN</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarContent"
                aria-controls="navbarContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarContent">
                <ul class="navbar-nav ml-auto d-flex justify-content-end">
                    <li class="nav-item"><a class="nav-link active" href="#">首页</a></li>
                    <li class="nav-item"><a class="nav-link" href="./客房.html">客房</a></li>
                    <li class="nav-item"><a class="nav-link" href="./餐饮.html">餐饮</a></li>
                    <li class="nav-item"><a class="nav-link" href="./关于我们.html">关于我们</a></li>
                    <li class="nav-item"><a class="nav-link" href="tel:4008888888">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                                class="bi bi-phone" viewBox="0 0 16 16">
                                <path
                                    d="M11 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h6zM5 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H5z" />
                                <path d="M8 14a1 1 0 1 0 0-2 1 1 0 0 0 0 2z" />
                            </svg>400 888 8888</a></li>
                    <li class="nav-item"><a class="btn btn-warning" href="./立即预定.html">立即预订</a></li>
                    <li class="nav-item mx-2 ms-auto"><a href="#loginModal" class="btn btn-primary"
                            data-toggle="modal">登录</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    <!-- 登录模态框 -->
    <div class="modal fade" id="loginModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body">
                    <button type="button" data-dismiss="modal" class="close" aria-lable="关闭">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <div class="row mt-5">
                        <div class="col">
                            <p> 扫码</p>
                            <img src="./img/1.gif" height="300px" width="300px" alt="">
                        </div>
                        <div class="col">
                            <!-- Nav tabs -->
                            <ul class="nav nav-pills my-pills" id="myTab" role="tablist">
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link active" id="home-tab" data-toggle="tab" data-target="#home"
                                        type="button">账号登陆</button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link" id="profile-tab" data-toggle="tab" data-target="#profile"
                                        type="button">短信登陆</button>
                                </li>
                            </ul>

                            <!-- Tab panes -->
                            <div class="tab-content mt-3">
                                <div class="tab-pane active" id="home" role="tabpanel" aria-labelledby="home-tab">
                                    <form action="">
                                        <div class="form-group">
                                            <input type="text" name="" id="" class="form-control"
                                                placeholder="请输入账号/邮箱">
                                        </div>
                                        <div class="form-group">
                                            <input type="text" name="" id="" class="form-control" placeholder="请输入密码">
                                        </div>
                                        <div class="form-group text-right">
                                            <a href="">忘记密码?</a>
                                        </div>
                                        <div class="form-group">
                                            <button class="btn btn-primary btn-block" type="submit">登录</button>
                                        </div>
                                        <div class="form-group text-center small">
                                            <input type="checkbox" name="" id=""> 我已阅读并同意<a
                                                href="#">《HUAN用户服务协议和隐私政策》</a>
                                        </div>
                                    </form>
                                </div>
                                <div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab">
                                    <form action="">
                                        <div class="form-group small text-muted">
                                            验证即登录，未注册将自动创建账号
                                        </div>
                                        <div class="form-group">
                                            <input type="text" name="" id="" class="form-control" placeholder="请输入手机号">
                                        </div>
                                        <div class="form-group position-relative">
                                            <input type="text" name="" id="" class="form-control" placeholder="请输入验证码">
                                            <a class="position-absolute border-left px-2"
                                                style="right: 5px; top:5px">获取验证码</a>
                                        </div>
                                        <div class="form-group mt-5">
                                            <button class="btn btn-primary btn-block" type="submit">登录</button>
                                        </div>
                                        <div class="form-group text-center small">
                                            <input type="checkbox" name="" id=""> 我已阅读并同意<a
                                                href="#">《HUAN用户服务协议和隐私政策》</a>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer  justify-content-between">
                    <div>
                        <img width="30px" src="https://passport.baidu.com/passApi/img/bd-acc-qzone.png" alt="">
                        <img width="30px" src="https://passport.baidu.com/passApi/img/bd-acc-tsina.png" alt="">
                        <img width="30px" src="https://passport.baidu.com/passApi/img/bd-acc-weixin.png" alt="">
                    </div>
                    <a href="">立即注册</a>
                </div>
            </div>
        </div>
    </div>

    <!--巨幕-->
    <div class="jumbotron jumbotron-fluid"
        style="background-image: url(./img/jumu.jpeg);background-position: center; background-size: cover;">
        <div class="container">
            <h1 class="display-4 text-white">发现奢华体验</h1>
            <p class="lead text-white">坐落于城市中心，为您提供无与伦比的舒适与奢华服务</p>
            <form class="row mt-5 bg-white px-3 py-5">
                <div class="col-md-3">
                    <label for="checkin">入住日期</label>
                    <input type="datetime-local" class="form-control">
                </div>
                <div class="col-md-3">
                    <label for="checkout" class="form-label">退房日期</label>
                    <input type="datetime-local" class="form-control">
                </div>
                <div class="col-md-3">
                    <label for="room" class="form-label">房型</label>
                    <select class="form-control pl-4">
                        <option>豪华客房</option>
                        <option>行政套房</option>
                        <option>总统套房</option>
                    </select>
                </div>
                <div class="col-md-2">
                    <label for="number" class="form-label">人数</label>
                    <input type="number" class="form-control" id="number" value="2">
                </div>
                <div class="col-md-3 py-2 " style="left: 400px;">
                    <button type="button" class="btn btn-warning btn-block ">查询空房</button>
                </div>
            </form>
        </div>
    </div>
    <!-- 尊享服务 -->
    <section class="py-5">
        <div class="container text-center">
            <h2 class="section-title">尊享服务</h2>
            <p class="mb-5">我们致力于为每位客人提供无与伦比的个性化服务体验</p>
            <div class="row">
                <div class="col-md-4">
                    <svg class="bi bi-wifi" width="2em" height="2em" viewBox="0 0 16 16" fill="currentColor"
                        xmlns="http://www.w3.org/2000/svg">
                        <path fill-rule="evenodd"
                            d="M6.858 11.858A1.991 1.991 0 0 1 8 11.5c.425 0 .818.132 1.142.358L8 13l-1.142-1.142z" />
                        <path fill-rule="evenodd"
                            d="M7.731 12.024l.269.269.269-.269a1.507 1.507 0 0 0-.538 0zm-1.159-.576A2.49 2.49 0 0 1 8 11c.53 0 1.023.165 1.428.448a.5.5 0 0 1 .068.763l-1.142 1.143a.5.5 0 0 1-.708 0L6.504 12.21a.5.5 0 0 1 .354-.853v.5l-.286-.41zM8 9.5a4.478 4.478 0 0 0-2.7.9.5.5 0 0 1-.6-.8c.919-.69 2.062-1.1 3.3-1.1s2.381.41 3.3 1.1a.5.5 0 0 1-.6.8A4.478 4.478 0 0 0 8 9.5zm0-3c-1.833 0-3.51.657-4.814 1.748a.5.5 0 0 1-.642-.766A8.468 8.468 0 0 1 8 5.5c2.076 0 3.98.745 5.456 1.982a.5.5 0 1 1-.642.766A7.468 7.468 0 0 0 8 6.5z" />
                        <path fill-rule="evenodd"
                            d="M8 3.5c-2.657 0-5.082.986-6.932 2.613a.5.5 0 1 1-.66-.75A11.458 11.458 0 0 1 8 2.5c2.91 0 5.567 1.081 7.592 2.862a.5.5 0 1 1-.66.751A10.458 10.458 0 0 0 8 3.5z" />
                    </svg>
                    <h5>高速WiFi</h5>
                    <p>全酒店覆盖高速无线网络</p>
                </div>
                <div class="col-md-4">
                    <svg class="bi bi-alt" width="2em" height="2em" viewBox="0 0 16 16" fill="currentColor"
                        xmlns="http://www.w3.org/2000/svg">
                        <path fill-rule="evenodd"
                            d="M1 13.5a.5.5 0 0 0 .5.5h3.797a.5.5 0 0 0 .439-.26L11 3h3.5a.5.5 0 0 0 0-1h-3.797a.5.5 0 0 0-.439.26L5 13H1.5a.5.5 0 0 0-.5.5zm10 0a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 0-1h-3a.5.5 0 0 0-.5.5z" />
                    </svg>
                    <h5>无边际泳池</h5>
                    <p>24小时开放天际线泳池</p>
                </div>
                <div class="col-md-4">
                    <svg class="bi bi-bell" width="2em" height="2em" viewBox="0 0 16 16" fill="currentColor"
                        xmlns="http://www.w3.org/2000/svg">
                        <path d="M8 16a2 2 0 0 0 2-2H6a2 2 0 0 0 2 2z" />
                        <path fill-rule="evenodd"
                            d="M8 1.918l-.797.161A4.002 4.002 0 0 0 4 6c0 .628-.134 2.197-.459 3.742-.16.767-.376 1.566-.663 2.258h10.244c-.287-.692-.502-1.49-.663-2.258C12.134 8.197 12 6.628 12 6a4.002 4.002 0 0 0-3.203-3.92L8 1.917zM14.22 12c.223.447.481.801.78 1H1c.299-.199.557-.553.78-1C2.68 10.2 3 6.88 3 6c0-2.42 1.72-4.44 4.005-4.901a1 1 0 1 1 1.99 0A5.002 5.002 0 0 1 13 6c0 .88.32 4.2 1.22 6z" />
                    </svg>
                    <h5>24小时礼宾</h5>
                    <p>专属团队定制个性化服务</p>
                </div>
            </div>
        </div>
    </section>
    <!-- 精选房型 -->
    <section class="py-5 bg-light">
        <div class="container">
            <h2 class="section-title text-center mb-5">精选房型</h2>
            <div class="row row-cols-1 row-cols-md-3 g-4">
                <div class="col-md-4">
                    <div class="card room-card h-100">
                        <img src="./img/2.jpg" class="card-img-top" alt="豪华城景房">
                        <div class="card-body">
                            <h5 class="card-title">豪华城景房</h5>
                            <p class="text-warning font-weight-bold mb-2">¥1288 / 晚起</p>
                            <p class="card-text small">49.45㎡ | 特大床/双床 | 迷你吧</p>
                            <a href="#" class="btn btn-warning mt-3">查看详情</a>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card room-card h-100">
                        <img src="./img/3.jpg " class="card-img-top" alt="行政套房">
                        <div class="card-body">
                            <h5 class="card-title">行政套房</h5>
                            <p class="text-warning font-weight-bold mb-2">¥2388 / 晚起</p>
                            <p class="card-text small">65.75㎡ | 独立起居区 | 行政酒廊</p>
                            <a href="#" class="btn btn-warning mt-3">查看详情</a>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card room-card h-100">
                        <img src="./img/4.jpeg" class="card-img-top" alt="总统套房">
                        <div class="card-body">
                            <h5 class="card-title">总统套房</h5>
                            <p class="text-warning font-weight-bold mb-2">¥8888 / 晚起</p>
                            <p class="card-text small">189.22㎡ | 私人管家 </p>
                            <a href="#" class="btn btn-warning mt-3">查看详情</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="text-center mt-5">
                <a href="./客房.html" class="btn btn-outline-warning">浏览所有房型</a>
            </div>
        </div>
    </section>
    <!-- 精致餐饮体验 -->
    <section class="py-5">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-md-6">
                    <h2 class="section-title">精致餐饮体验</h2>
                    <p class="mt-3">米其林星级团队打造美食之旅，融合本地鲜材与国际技法</p>
                    <ul class="list-unstyled mt-4">
                        <li class="mb-3">
                            <i class="fas fa-check text-warning mr-2"></i>
                            全日制餐厅：自助早午晚餐 + 开放式厨房
                        </li>
                        <li class="mb-3">
                            <i class="fas fa-check text-warning mr-2"></i>
                            顶层酒吧:360°城景 + 创意鸡尾酒
                        </li>
                        <li class="mb-3">
                            <i class="fas fa-check text-warning mr-2"></i>
                            英式下午茶:14:00-17:00大堂供应
                        </li>
                    </ul>
                    <a href="./餐饮.html" class="btn btn-warning mt-2">查看菜单</a>
                </div>
                <div class="col-md-6 mt-4 mt-md-0">
                    <img src="./img/5.jpg" class="img-fluid rounded" alt="餐饮环境">
                </div>
            </div>
        </div>
    </section>
    <!-- 客户评价 -->
    <section class="py-5">
        <div class="container">
            <h2 class="section-title text-center mb-5">客户评价</h2>
            <div class="row row-cols-1 row-cols-md-3 g-4">
                <div class="col-3">
                    <div class="review-card">
                        <p class="mb-2">"这是我住过最棒的酒店之一，从入住到退房，服务无可挑剔..."</p>
                        <h6 class="font-weight-bold mt-3">Blue</h6>
                    </div>
                </div>
                <div class="col-3">
                    <div class="review-card">
                        <p class="mb-2">"水疗体验太棒了！理疗师专业且细心，完全放松的感觉..."</p>
                        <h6 class="font-weight-bold mt-3">JS</h6>
                    </div>
                </div>
                <div class="col-3">
                    <div class="review-card">
                        <p class="mb-2">"商务旅行首选!高速WiFi + 安静环境 + 高效服务..."</p>
                        <h6 class="font-weight-bold mt-3">Jone</h6>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--页脚-->
    <footer>
        <div class="container">
            <div class="col text-center">
                <!-- 联系我们 -->
                <div class="col-md-12">
                    <h5>联系我们</h5>
                    <div class="contact-info">
                        <p>中国上海市浦东新区某路某号 1288 号</p>
                        <p>电话：400 888 8888</p>
                        <p>邮箱：1111111.com</p>
                    </div>
                </div>
                <!-- 版权与政策 -->
                <div class="col mt-4">
                    <div class="col-12 text-center">
                        <p class="mb-0">&copy; 2023 奢华酒店集团 版权所有</p>
                        <p class="mb-0">
                            <a href="#" class="mr-3">隐私政策</a>
                            <a href="#" class="mr-3">使用条款</a>
                            <a href="#">Cookie 政策</a>
                        </p>
                    </div>
                </div>
            </div>
    </footer>
</body>

</html>